<template>
    <div class="dfsd">
        <Row class="dfdxf">
            <Col style="text-align: right" span="24">
                <Button type="primary" size="small" :loading="saveNewMenuLoading" @click="saveNewMenussForRole">保存修改
                </Button>
            </Col>
        </Row>
        <Tree ref="tree" :data="tree" show-checkbox multiple class="dfdxx"
              @on-check-change="treeChanges"></Tree>
        <Spin size="large" fix v-if="loadingMenus"></Spin>
    </div>
</template>

<script>
    export default {
        name: 'RoleMenus',
        props: {
            id: {
                type: Number,
                default () {
                    return null
                }
            }
        },
        mounted: function () {
            if (this.tree.length === 0) {
                this.loadMenuTree()
            }
            setTimeout(() => {
                this.loadRoleHasMenus(this.id)
            }, 600)
        },
        data () {
            return {
                loadingMenus: false,
                saveNewMenuLoading: false,
                tree: [],
                oriRolesMenus: [],
                curRolesMenus: []
            }
        },
        watch: {
            id (newOne, oldOne) {
                // 请求数据
                this.loadRoleHasMenus(newOne)
            }
        },
        methods: {
            loadMenuTree: function () {
                window.myapi.do_post('$menu/tree', {}).then(resp => {
                    if (resp.status === 200 && resp.data.status === 200) {
                        this.tree = resp.data.data
                    } else {
                        this.$Notice.warning({
                            title: '提示',
                            desc: resp.data.msg
                        })
                    }
                }).finally(() => {
                })
            },
            loadRoleHasMenus (id) {
                this.loadingMenus = true
                window.myapi.do_post('$menu/rmenus', {id: id}).then(resp => {
                    if (resp.status === 200 && resp.data.status === 200) {
                        this.oriRolesMenus = resp.data.data
                        this.curRolesMenus = resp.data.data
                        this.makeTreeEmpty()
                    } else {
                        this.$Notice.warning({
                            title: '提示',
                            desc: resp.data.msg
                        })
                    }
                }).finally(() => {
                    this.loadingMenus = false
                })
            },
            saveNewMenussForRole () {
                let menuIDs = this.curRolesMenus.map(item => item.id)
                this.saveNewMenuLoading = true
                window.myapi.post_json('$role/updateMenus/' + this.id, menuIDs).then(resp => {
                    if (resp.status === 200 && resp.data.status === 200) {
                        this.$Notice.success({
                            title: '提示',
                            desc: '操作成功！'
                        })
                        this.loadRoleHasMenus(this.id)
                    } else {
                        this.$Notice.success({
                            title: '提示',
                            desc: resp.data.msg
                        })
                    }
                }).catch((error) => {}).finally(() => {
                    this.saveNewMenuLoading = false
                })
            },
            treeChanges (ids) {
                  this.curRolesMenus = this.$refs.tree.getCheckedAndIndeterminateNodes()
              // console.log('ids', ids)
              // console.log('getCheckedAndIndeterminateNodes', this.$refs.tree.getCheckedAndIndeterminateNodes())
                  // 不能重用一个数据，需要复制一个新的，才能勾选
                  this.makeTreeEmpty()
            },
            rebackTreeOriData () {
                  this.curRolesMenus = this.oriRolesMenus
                  // 不能重用一个数据，需要复制一个新的，才能勾选
                  this.makeTreeEmpty()
            },
            makeTreeEmpty () {
                this.tree = JSON.parse(JSON.stringify(this.tree))
                function reback (list) {
                    list.forEach(son => {
                        son.checked = false
                        if (son.children.length > 0) {
                            reback(son.children)
                        }
                    })
                }
               reback(this.tree)
               this.setSelections(this.tree)
            },
            setSelections: function (datas) {
                // 递归菜单
                // 设置选喜到菜单树
                if (this.curRolesMenus.length > 0) {
                    datas.forEach(item => {
                        let findObj = this.curRolesMenus.find(son => son.id === item.id)
                        if (findObj !== undefined) {
                            if (item.id !== 1 && item.pid !== 1) {
                                // 如果顶级菜单勾选，所有的子级也会勾选，所以，这里排除
                                item.checked = true
                            }
                            // 木有子集但已经勾选
                            if (item.pid === 1 && item.children.length === 0) {
                                item.checked = true
                            }
                        } else {
                            item.checked = false
                        }
                        if (item.children.length > 0) {
                            this.setSelections(item.children)
                        }
                    })
                } else {
                    datas.forEach(item => {
                        item.checked = false
                        if (item.children.length > 0) {
                            this.setSelections(item.children)
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped>

    .dfdxx {
      overflow-y: auto;
      height: 800px;
      border: solid 1px #ebe3e3;
      border-radius: 5px;
      padding: 5px 10px;
    }

    .dfsd {
        padding: 10px 20px;
    }
    .dfdxf{
        margin-bottom: 5px;
    }
</style>
